---
interface Props {
  repoUrl: string;
}
const { repoUrl } = Astro.props;
---

<a
  href={repoUrl}
  class="block border-3 border-black bg-white p-2 shadow-neo hover:shadow-none transition-all hover:translate-y-0.5 group"
  aria-label="GitHub Repository"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="black"
    stroke="currentColor"
    stroke-width="2"
  >
    <path
      d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
    ></path>
    <path d="M9 18c-4.51 2-5-2-7-2"></path>
  </svg>
  <span
    class="absolute -translate-x-1/2 mt-4 bg-black text-white text-xs px-2 py-1 shadow-neo opacity-0 group-hover:opacity-100 transition-opacity"
  >
    View Source
  </span>
</a>
